$(document).ready(function() {
    // API地址配置
    const API = {
        products: 'http://localhost:8080/api/products',
        types: 'http://localhost:8080/api/product-types'
    };

    // 初始化页面
    init();

    function init() {
        loadProducts();
        loadProductTypes();
        setupEventHandlers();
    }

    // 加载商品数据
    function loadProducts(keyword = '') {
        showLoading();
        
        let url = API.products;
        if (keyword) {
            url += `/search?name=${encodeURIComponent(keyword)}`;
        }
        
        $.get(url)
            .done(function(products) {
                renderProducts(products);
            })
            .fail(function(xhr, status, error) {
                showError('加载商品', error);
            })
            .always(function() {
                hideLoading();
            });
    }

    // 加载商品类型数据
    function loadProductTypes() {
        $.get(API.types)
            .done(function(types) {
                renderProductTypes(types);
                updateTypeDropdown(types);
            })
            .fail(function(xhr, status, error) {
                showError('加载商品类型', error);
            });
    }

function renderProducts(products) {
    const $tbody = $('#productTableBody').empty();
    
    if (products.length === 0) {
        $tbody.append('<tr><td colspan="10" style="text-align:center;">没有找到商品数据</td></tr>');
        return;
    }

    // 获取所有类型用于显示类型名称
    $.get(API.types)
        .done(function(types) {
            const typeMap = {};
            types.forEach(function(type) {
                typeMap[type.typeId] = type.typeName;
            });

            products.forEach(function(product) {
                const statusClass = `status-${product.status}`;
                const statusText = product.status === 'active' ? '上架' : '下架';
                const toggleText = product.status === 'active' ? '下架' : '上架';
                const typeName = typeMap[product.typeId] || '无类型';
                
                // 图片显示（修改部分）
                let imageCell = '无图片';
                if (product.imageUrl) {
                    // 确保URL以斜杠开头
                    const imagePath = product.imageUrl.startsWith('/') ? product.imageUrl : '/' + product.imageUrl;
                    const fullImageUrl = 'http://localhost:8080' + imagePath;
                    imageCell = `<img src="${fullImageUrl}" class="product-image-thumb" alt="${product.productName}">`;
                }
                
                // 格式化日期
                const createdAt = formatDate(product.createdAt);
                const updatedAt = formatDate(product.updatedAt);
                
                $tbody.append(`
                    <tr>
                        <td>${product.productId}</td>
                        <td>${product.productName}</td>
                        <td>${typeName}</td>
                        <td>¥${product.price.toFixed(2)}</td>
                        <td>${product.stock}</td>
                        <td>${imageCell}</td>
                        <td class="${statusClass}">${statusText}</td>
                        <td>${createdAt}</td>
                        <td>${updatedAt}</td>
                        <td>
                            <button class="action-btn toggle-btn" 
                                    data-id="${product.productId}">
                                ${toggleText}
                            </button>
                        </td>
                    </tr>
                `);
            });
            
            // 绑定图片点击事件
            $('.product-image-thumb').click(function() {
                showImageModal($(this).attr('src'), $(this).attr('alt'));
            });
        })
        .fail(function(xhr, status, error) {
            showError('加载商品类型', error);
        });
}
    // 渲染商品类型列表
    function renderProductTypes(types) {
        const $tbody = $('#typeTableBody').empty();
        
        if (types.length === 0) {
            $tbody.append('<tr><td colspan="5" style="text-align:center;">没有找到商品类型数据</td></tr>');
            return;
        }

        types.forEach(function(type) {
            // 格式化日期
            const createdAt = formatDate(type.createdAt);
            const updatedAt = formatDate(type.updatedAt);
            
            $tbody.append(`
                <tr>
                    <td>${type.typeId}</td>
                    <td>${type.typeName}</td>
                    <td>${type.description || '无描述'}</td>
                    <td>${createdAt}</td>
                    <td>${updatedAt}</td>
                </tr>
            `);
        });
    }

    // 更新商品表单中的类型下拉框
    function updateTypeDropdown(types) {
        const $select = $('#productType').empty();
        
        types.forEach(function(type) {
            $select.append(`<option value="${type.typeId}">${type.typeName}</option>`);
        });
    }

    // 切换商品状态
    function toggleProductStatus(productId) {
        $.post(`${API.products}/${productId}/toggle-status`)
            .done(function() {
                alert('状态切换成功');
                loadProducts($('#searchInput').val());
            })
            .fail(function(xhr, status, error) {
                showError('切换状态', error);
            });
    }

    // 添加商品
    function addProduct(formData) {
        showLoading();
        
        $.ajax({
            url: API.products,
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function() {
                alert('商品添加成功');
                resetForm('product');
                loadProducts();
            },
            error: function(xhr, status, error) {
                showError('添加商品', error);
            },
            complete: function() {
                hideLoading();
            }
        });
    }

    // 添加商品类型
    function addProductType(typeData) {
        $.ajax({
            url: API.types,
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(typeData),
            success: function() {
                alert('商品类型添加成功');
                resetForm('type');
                loadProductTypes();
            },
            error: function(xhr, status, error) {
                showError('添加商品类型', error);
            }
        });
    }

    // 设置事件处理器
    function setupEventHandlers() {
        // 表单显示/隐藏
        $('#showAddFormBtn').click(function() {
            $('#addProductForm').toggle();
        });
        
        $('#cancelAddBtn').click(function() {
            resetForm('product');
        });
        
        $('#showTypeFormBtn').click(function() {
            $('#addTypeForm').toggle();
        });
        
        $('#cancelTypeBtn').click(function() {
            resetForm('type');
        });
        
        // 表单提交
        $('#productForm').submit(function(e) {
            e.preventDefault();
            
            // 创建FormData对象
            const formData = new FormData();
            
            // 添加商品数据
            const productData = {
                productName: $('#productName').val(),
                typeId: parseInt($('#productType').val()),
                price: parseFloat($('#productPrice').val()),
                stock: parseInt($('#productStock').val()),
                status: $('#productStatus').val(),
                description: $('#productDesc').val()
            };
            formData.append('product', new Blob([JSON.stringify(productData)], {
                type: "application/json"
            }));
            
            // 添加图片文件
            const imageFile = $('#productImageFile')[0].files[0];
            if (imageFile) {
                formData.append('image', imageFile);
            }
            
            addProduct(formData);
        });
        
        $('#typeForm').submit(function(e) {
            e.preventDefault();
            
            const typeData = {
                typeName: $('#typeName').val(),
                description: $('#typeDesc').val()
            };
            
            addProductType(typeData);
        });
        
        // 搜索功能
        $('#searchBtn').click(function() {
            const keyword = $('#searchInput').val().trim();
            loadProducts(keyword);
        });
        
        $('#resetBtn').click(function() {
            $('#searchInput').val('');
            loadProducts();
        });
        
        $('#searchInput').keypress(function(e) {
            if (e.which === 13) {
                $('#searchBtn').click();
            }
        });
        
        // 状态切换
        $(document).on('click', '.toggle-btn', function() {
            const productId = $(this).data('id');
            toggleProductStatus(productId);
        });
        
        // 图片预览
        $('#productImageFile').change(function() {
            const file = this.files[0];
            const $preview = $('#imagePreview');
            
            if (file) {
                if (!file.type.match('image.*')) {
                    alert('请选择图片文件');
                    $(this).val('');
                    return;
                }
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    $preview.html(`<img src="${e.target.result}" alt="图片预览">`);
                }
                reader.readAsDataURL(file);
            } else {
                $preview.empty();
            }
        });
    }

    // 显示图片模态框
    function showImageModal(src, alt) {
        $('#modalImage').attr('src', src);
        $('#caption').text(alt);
        $('#imageModal').show();
    }

    // 关闭图片模态框
    $(document).on('click', '.close, #imageModal', function(e) {
        if (e.target === this || $(e.target).hasClass('close')) {
            $('#imageModal').hide();
        }
    });

    // 重置表单
    function resetForm(type) {
        $(`#${type}Form`)[0].reset();
        $(`#add${type.charAt(0).toUpperCase() + type.slice(1)}Form`).hide();
        if (type === 'product') {
            $('#imagePreview').empty();
        }
    }

    // 显示加载提示
    function showLoading() {
        $('#loading').show();
    }

    // 隐藏加载提示
    function hideLoading() {
        $('#loading').hide();
    }

    // 显示错误信息
    function showError(action, error) {
        alert(`${action}失败: ${error}`);
    }

    // 格式化日期
    function formatDate(dateString) {
        if (!dateString) return '未知';
        const date = new Date(dateString);
        return date.toLocaleString();
    }
});